<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 甜呦商城</title>
    <link rel="stylesheet" href="css/cart.css">
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <h1>甜呦商城</h1>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="category.html">分类</a></li>
                <li><a href="cart.html" class="active">购物车</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </nav>
        <div class="user-actions">
            <a href="login.html" class="btn btn-login">登录</a>
            <a href="register.html" class="btn btn-register">注册</a>
        </div>
    </div>
</header>

<div class="container">
    <h2 class="page-title">我的购物车</h2>

    <div id="cartItems" class="cart-items">
        <!-- 购物车商品将通过JavaScript动态添加 -->
    </div>

    <div class="cart-summary">
        <div class="summary-box">
            <h3>购物车总计</h3>
            <p>商品数量: <span id="totalQuantity">0</span></p>
            <p>总价: <span id="totalPrice">¥0.00</span></p>
            <button id="checkoutBtn" class="btn-checkout">结算</button>
        </div>
    </div>
</div>

<footer>
    <div class="container">
        <p>&copy; 2025 甜呦商城 版权所有</p>
    </div>
</footer>

<script src="js/cart.js"></script>
</body>
</html>